<template>
  <div>
    <el-card class="el-card">
      <el-row>
        <el-col :span="9">
          <el-input
            v-model="queryData.keyword"
            style="max-width: 600px"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #prepend>
              <el-select
                v-model="queryData.user_level_id"
                placeholder="请选择会员等级"
                style="width: 115px"
              >
                <el-option :label="item.name" :value="item.id" v-for="item in levelList" :key="item.id"/>
               
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" @click="getUserList"/>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-button type="primary" class="addBtn" @click="openAddDialog">新增</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column  label="用户">
          <template #default="scope">
            <div class="user">
              <el-avatar
              :size="50"
                :src="scope.row.avatar"
                style="margin-right: 20px;"
              />
              <span>{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_level.name" label="会员等级" ></el-table-column>
        <el-table-column prop="create_time" label="注册时间"></el-table-column>
        <el-table-column prop="address" label="状态">
            <template #default="scope">
                <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
            <template #default="scope">
                <el-tooltip
                effect="dark"
                content="编辑"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  :icon="Edit"
                  size="small"
                  @click="editUser(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  :icon="Delete"
                  size="small"
                  @click=delUser(scope.row)
                ></el-button
              ></el-tooltip>
            </template>

        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="titleVal" width="500">
    <el-form :model="form" ref="formRef">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="会员等级" :label-width="formLabelWidth">
        <el-select v-model="form.user_level_id" placeholder="请选择会员等级">
          <el-option :label="item.name" :value="item.id" v-for="item in levelList" :key="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="头像" :label-width="formLabelWidth">
       <SelectImg v-model="form.avatar"></SelectImg>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="form.status" autocomplete="off" :active-value="1" :inactive-value="0"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitOk">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref,reactive } from "vue";
import { Search,Delete, Edit } from "@element-plus/icons-vue";
import {getUserListFn,addUserFn,editUserFn,delUserFn} from "@/api/user.js"
import { ElMessage,ElMessageBox } from "element-plus";
const tableData =ref([]) 
// 表单实例
const formRef = ref(null)
// 当前页码
const page = ref(1)
// 查询参数
const queryData = reactive({
    limit:10,
    keyword:'',
    // 会员等级
    user_level_id:null
})
// 会员等级分类
const levelList = ref([])
// 新增用户弹框
const dialogFormVisible = ref(false)
// 表单数据源
const form = ref({
    username:'',
    password:'',
    user_level_id:null,
    nickname:'',
    phone:'',
    email:'',
    avatar:'',
    status:1
})
// 新增弹框标题
const titleVal = ref("新增用户")
const formLabelWidth = "100px"
// 用户Id
const userId = ref(0)
// 获取用户列表
const getUserList =async () => {
    const res = await getUserListFn(page.value,queryData)
    if(res.msg && res.msg !=='ok') return
    tableData.value = res.data.list
    levelList.value = res.data.user_level
}
getUserList()
// 新增
const openAddDialog = () => {
    dialogFormVisible.value = true
}
// 新增确认
const submitOk =async () => {
    if(titleVal.value == '新增用户') {
        const res = await addUserFn(form.value)
        if(res.msg && res.msg !=='ok') return
        ElMessage.success('新增成功')
    }else {
        const res = await editUserFn(userId.value,form.value)
        if(res.msg && res.msg !=='ok') return
        ElMessage.success('编辑成功')
    }
    formRef.value.resetFields()
    dialogFormVisible.value = false
    getUserList()
}
// 编辑
const editUser = (row) => {
    userId.value = row.id
    titleVal.value = '编辑用户'
    form.value.username = row.username
    form.value.password = row.password
    form.value.user_level_id = row.user_level_id
    form.value.nickname = row.nickname
    form.value.phone = row.phone
    form.value.email = row.email
    form.value.avatar = row.avatar
    form.value.status = row.status
    dialogFormVisible.value = true
}
// 删除
const delUser =async (row) => {
    const isDel = await ElMessageBox.confirm(
        '是否删除',
        '删除',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    )
    if(isDel == 'confirm') {
        const res = await delUserFn(row.id)
        if(res.msg && res.msg !=='ok') return
        ElMessage.success('删除成功')
        getUserList()
    }

}
</script>

<style lang="less" scoped>
.addBtn {
  margin: 20px 0;
}
.user {
    display: flex;
    align-items: center;
}
.el-card {
    margin-top:20px;
}
</style>
